import { RedoOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React, { ReactNode, useMemo } from 'react';
import { YmTablePorps } from '.';
import { ColumnsSetting, ColumnsSettingProps } from './ColumnsSetting';

// type ToolBarType = 'columnsSetting' | 'reFresh' | 'add' | 'delete';

export interface ToolBarProps {
  items?: { key: string; children?: React.ReactElement }[];
  tableColumns?: YmTablePorps['columns'];
  onColumnsChange?: ColumnsSettingProps['onColumnsChange'];
  onBtnClick?(type: string, e: React.MouseEvent): void;
  prefixNode?: ReactNode;
}

export function ToolBar({
  items = [],
  tableColumns,
  onColumnsChange,
  onBtnClick,
  prefixNode,
}: ToolBarProps) {
  const children = useMemo(() => {
    return items.map((item) => {
      const { key, children } = item;
      if (key === 'columnsSetting') {
        return (
          <ColumnsSetting
            key={key}
            columns={tableColumns}
            onColumnsChange={onColumnsChange}
          />
        );
      } else if (key === 'reFresh') {
        return (
          <Button
            key={key}
            icon={<RedoOutlined />}
            onClick={(e) => onBtnClick?.('reFresh', e)}
          ></Button>
        );
      } else if (React.isValidElement(children)) {
        const tempChildren = React.cloneElement(children, {
          onClick: (...args: any) => {
            (children.props as any)?.onClick?.(...args);
            onBtnClick?.(key, args[0]);
          },
        } as any);
        return <React.Fragment key={key}>{tempChildren}</React.Fragment>;
      }
    });
  }, [items]);

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <div
        style={{
          flexGrow: 1,
          display: 'inline-flex',
          alignItems: 'center',
          columnGap: 8,
        }}
      >
        {prefixNode}
      </div>
      <div
        style={{
          flexShrink: 0,
          display: 'inline-flex',
          alignItems: 'center',
          columnGap: 8,
        }}
      >
        {children}
      </div>
    </div>
  );
}

export interface TableToolBarProps {
  tableColumns?: YmTablePorps['columns'];
  toolbar?: ToolBarProps | false;
  onColumnsChange?: ToolBarProps['onColumnsChange'];
  onRefresh?(): void;
}

export function TableToolBar({
  toolbar = {},
  onColumnsChange,
  tableColumns,
  onRefresh,
}: TableToolBarProps) {
  if (
    toolbar === false ||
    (toolbar.items?.length === 0 && !toolbar.prefixNode)
  ) {
    return null;
  } else {
    const {
      items = [{ key: 'reFresh' }, { key: 'columnsSetting' }],
      ...props
    } = toolbar;
    return (
      <ToolBar
        tableColumns={tableColumns}
        items={items}
        {...props}
        onColumnsChange={(...params) => {
          toolbar.onColumnsChange?.(...params);
          onColumnsChange?.(...params);
        }}
        onBtnClick={(type, e) => {
          props.onBtnClick?.(type, e);
          if (type === 'reFresh') {
            onRefresh?.();
          }
        }}
      />
    );
  }
}
